<template>
	<div class="components-container">
		<h1>
			<span class="z_topTitle_block">{{params.name}}</span>
		</h1>
		<div class='chart-container'>
			<el-row :gutter="20" style="margin-top: 2em;">
				<el-col v-for="item in topTargetData" :key="item.title" class="col-xs-1-5 col-sm-1-5 col-md-1-5 col-lg-1-5" style="text-align: center;">
					<div :style="{background:item.color}" style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0; border-radius: 1em;">
						<div style="float: left; margin-left: 10%; width: 5em; height: 5em; border-radius: 50%;background: white">
								<icon-svg :icon-class="item.img"  :iconStyle="'color:green;width:80%;height:100%'"></icon-svg>
						</div>						
						<div style="float: left; width: 50%;">
							<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">{{item.title}}</div>
							<div style="vertical-align: center; font-size: 1.5em;"><b>{{item.value}}</b></div>
						</div>
					</div>
				</el-col>
			</el-row>
			
			<el-row class="myTabClass" style="margin-top: 2em;">
				<el-tabs  type="card" v-model="activeName" @tab-click="setHandleClick">
					<el-tab-pane v-for="(item,index) in initData"   :label="item.label"    :key="item.label" :name="item.name">
						<el-col  :xs="24" :sm="24" :md="24" :lg="24">
							<!--第一个图-->
							<el-row class="tableCon" style=" border: 2px solid #216BCE;border-radius: 1em; box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px">
								<el-col :xs="24" :sm="10" :md="10" :lg="10" style="text-align: center;">
								<el-row style="margin: 2.5em auto 1em; color: white;font-size: 1.5em;">员工合伙人累计</el-row>
								<el-row style="margin: 1em auto 1em; color: #FF9933;"><b style="font-size: 1.8em;">50000&nbsp;<span style="font-size: 0.8em;">人</span></b></el-row>
								<el-row style="margin: 1em auto 2em; color: white;font-size: 1.5em;">占合伙人总数的&nbsp;<span style="color: red;">40%</span></el-row>
								<el-row style="padding: 0.6em;">
									<el-col :xs="8" :sm="8" :md="8" :lg="8" style="text-align: center;">
										<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
											<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">累计发展下线:</div>
											<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>1918</b></div>
										</div>
									</el-col>
									<el-col :xs="8" :sm="8" :md="8" :lg="8" style="text-align: center;">
										<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
											<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">累计报备人数:</div>
											<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>18</b></div>
										</div>
									</el-col>
									<el-col :xs="8" :sm="8" :md="8" :lg="8" style="text-align: center;">
										<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;">
											<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">累计成交人数:</div>
											<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>8</b></div>
										</div>
									</el-col>
								</el-row>
				</el-col>
				<el-col :xs="24" :sm="14" :md="14" :lg="14" style="text-align: left;">
					<!--<div style="margin: 1em; text-align: center;">
						<el-radio-group text-color="white" fill="#339966" v-model="radio0">
							<el-radio-button label="100人以上"></el-radio-button>
							<el-radio-button label="50-100人"></el-radio-button>
							<el-radio-button label="30-50人"></el-radio-button>
							<el-radio-button label="10-30人"></el-radio-button>
							<el-radio-button label="1-10人"></el-radio-button>
							<el-radio-button label="0人"></el-radio-button>
						</el-radio-group>
					</div>-->
					<chart ref="moneyChart" :option="moneyOption" />
				</el-col>
			</el-row>
							
							<el-row class="bigTitleCon"style="background: #262544;padding:3em 1em;">
								<el-col :xs="24" :sm="16" :md="16" :lg="16" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">时间：</b>
									<el-radio-group text-color="white" fill="#339966" v-model="radio5">
										    <el-radio-button label="今天"></el-radio-button>
										    <el-radio-button label="最近七天"></el-radio-button>
										    <el-radio-button label="最近30天"></el-radio-button>
									</el-radio-group>
									<el-date-picker style="padding-left:10px"  v-model="topDate" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2">
									</el-date-picker>
								</el-col>
								
								<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: right;padding-right: 1em;">
									<el-radio-group size="small" v-model="radio3">
									    <el-radio-button label="按天"></el-radio-button>
									    <el-radio-button label="按周"></el-radio-button>
									    <el-radio-button label="按月"></el-radio-button>
									</el-radio-group>
								</el-col>
							</el-row>
							<div style="border: 2px solid #216BCE;border-radius: 1em;">
							<el-row style="padding: 1em; border-radius: 1em;">
								<b class="z_topTitle_block" style="margin-left: 0px; margin-right: 0px; font-size: 1.3em;">合伙人分析统计</b>
							</el-row>
							<el-row class="bigTitleCon"style="padding-bottom: 1em;">
								<el-col class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">来源：</b>
									<el-radio-group text-color="white" fill="#339966" v-model="radio4">
										    <el-radio-button label="全部"></el-radio-button>
										    <el-radio-button label="物联"></el-radio-button>
										    <el-radio-button label="地产"></el-radio-button>
										    <el-radio-button label="电商"></el-radio-button>
										    <el-radio-button label="集团"></el-radio-button>
										    <el-radio-button label="销售"></el-radio-button>
										    <el-radio-button label="金控"></el-radio-button>
										    <el-radio-button label="浩德融媒"></el-radio-button>
									</el-radio-group>
								</el-col>
							</el-row>
							<el-row :gutter="20" style="padding:0 0.6em;border-top: 1px solid #216BCE;border-bottom: 1px solid #216BCE;">
								<el-col :xs="24" :sm="4" :md="4" :lg="4" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 4em; line-height: 3em; font-size: 1.5em; vertical-align: center;">今日数据统计:</div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">新增合伙人:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>18</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">新增报备人:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>8</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">新增推荐人:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>63</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">发展下线转化率:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>6%</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: right;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;">
										<div style="height: 4em; line-height: 3em; font-size: 1.5em; vertical-align: center;">累计人数：<b style=" color: #FF9933;">50000人</b>&nbsp;&nbsp;</div>
									</div>
								</el-col>
							</el-row>
							<div class="tableCon">
								<div style="margin: 1em; text-align: center; font-size: 1.5em; color: #ccc;" >
									统计分析图
								</div>
								<el-row class="bigTitleCon"style="padding: 1em;">
									<el-col :xs="24" :sm="16" :md="16" :lg="16" style="text-align: left;">
										<b style="color: white;margin-left: 1em;">指标：</b>
										<el-select v-model="lable" placeholder="请选择筛选条件">
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										</el-select>
										<div style="position: relative; display: inline-block;">
											<el-checkbox style="color: white;margin-left: 1em;" v-model="checked">部门对比</el-checkbox>
											<div v-if="checked" style="padding: 15px 10px; width:300px;height: 150px; top: 30px; left:35px;position:absolute;z-index: 999;border-radius: 10px; background: rgba(150,150,150,0.3);">
												<el-checkbox style="color: white;margin-top: 1em; margin-left: 1em;" v-model="checked">物联</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em; margin-left: 1em;" v-model="checked">地产</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">电商</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">集团</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">销售</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">金控</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">浩德融媒</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">其他</el-checkbox>
												<el-button style="position: absolute;left: 100px;top:140px;" size="small" >确定</el-button>
												<el-button style="position: absolute;left: 160px;top:140px;" size="small" >重置</el-button>
											</div>
										</div>

									</el-col>
									<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: right;padding-right: 1em;">
										<div style="float: left; display:iinline-block;background: red;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">员工合伙人</div>
										<div style="float: left; display:iinline-block;background: yellow;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">发展下线</div>
										<div style="float: left; display:iinline-block;background: cyan;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">报备人数</div>
										<div style="float: left; display:iinline-block;background: hotpink;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">成交人数</div>
									</el-col>
								</el-row>
									<chart :chartId="item.refName" :ref="item.refName" :option="item.option" />
								<el-row style="text-align: center;">
									<el-button type="info" style="width: 100%;border-radius:0em 0em 1em 1em;" v-show="!isShow" @click="isShow = true">查看详情&nbsp;&nbsp;<i class="el-icon-arrow-down"></i></el-button>
								</el-row>
								<el-collapse-transition>
							        <div v-show="isShow">
							          <el-table
								      :data="tableData"
								      border
								      height="430"
								      style="width: 100%">
								       <el-table-column label-class-name="text-center" label="2017/11/08">
									        <el-table-column
									          label="排名"
									          type="index"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="name"
									          label="板块"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="data1"
									          label="报备顾客频次"
									          label-class-name="text-center"
									          class-name="text-center">
									        </el-table-column>
									        <el-table-column
									          prop="data2"
									          label-class-name="text-center"
									          class-name="text-center"
									          label="发展下线频次">
									        </el-table-column>
									      </el-table-column>
								    </el-table>
							        </div>
							   </el-collapse-transition>
							   <el-row style="text-align: center;">
									<el-button type="info" style="width: 100%;border-radius:0em 0em 1em 1em;" v-show="isShow" @click="isShow = false">收起&nbsp;&nbsp;<i class="el-icon-arrow-up"></i></el-button>
								</el-row>
							</div>
							</div>
							<!--<el-row :gutter="20" class="bigTitleCon"style="background: #1B1F28;padding: 2em 1em;">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b class="z_topTitle_block" style="font-size: 1.3em;">成交量统计&nbsp;&nbsp;<span style="font-size: 0.6em;">（当前共成交186笔）</span></b>
									<b style="color: white;margin-left: 1em;">普通住宅：<span class="z_topTitle_block">110套</span></b>
									<b style="color: white;margin-left: 1em;">车位：<span class="z_topTitle_block">62个</span></b>
									<b style="color: white;margin-left: 1em;">洋房：<span class="z_topTitle_block">6套</span></b>
								</el-col>
							</el-row>-->
							<el-row class="bigTitleCon"style="background: #262544;padding:2em 1em;"></el-row>
							<div style=" border: 2px solid #216BCE;border-radius: 1em;">
							<el-row class="bigTitleCon"style="padding: 1em;border-radius: 1em;">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b class="z_topTitle_block" style="font-size: 1.3em;">用户活跃度统计</b>
								</el-col>
							</el-row>
							<el-row class="bigTitleCon"style=" padding-bottom: 1em;">
								<el-col class="mayel-radio-group" :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">来源：</b>
									<el-radio-group text-color="white" fill="#339966" v-model="radio4">
										    <el-radio-button label="全部"></el-radio-button>
										    <el-radio-button label="物联"></el-radio-button>
										    <el-radio-button label="地产"></el-radio-button>
										    <el-radio-button label="电商"></el-radio-button>
										    <el-radio-button label="集团"></el-radio-button>
										    <el-radio-button label="销售"></el-radio-button>
										    <el-radio-button label="金控"></el-radio-button>
										    <el-radio-button label="浩德融媒"></el-radio-button>
									</el-radio-group>
								</el-col>
							</el-row>
							<el-row :gutter="20" style="border-top: 1px solid #216BCE;border-bottom: 1px solid #216BCE;">
								<el-col :xs="24" :sm="4" :md="4" :lg="4" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 4em; line-height: 3em; font-size: 1.5em; vertical-align: center;">今日数据统计:</div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">总频率（次）:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>1000</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">活跃人数（人）:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>200</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">报备客户频次（次）:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>400</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="3" :md="3" :lg="3" style="text-align: center;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;border-right: 2px solid #216BCE;">
										<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">发展下线频次（次）:</div>
										<div style="vertical-align: center; font-size: 1.5em; color: #FF9933;"><b>600</b></div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: right;">
									<div style="color: white; float: left; width: 100%; height: 5em; padding: 1em 0;">
										<div style="height: 4em; line-height: 3em; font-size: 1.5em; vertical-align: center;">累计人数（人）：<b style=" color: #FF9933;">50000</b>&nbsp;&nbsp;</div>
									</div>
								</el-col>
							</el-row>
							<el-row class="tableCon" style="box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<div style="margin: 1em; text-align: center; font-size: 1.5em; color: #ccc;" >
									统计分析图
								</div>
								<el-row class="bigTitleCon"style="padding: 1em;">
									<el-col :xs="24" :sm="16" :md="16" :lg="16" style="text-align: left;">
										<b style="color: white;margin-left: 1em;">指标：</b>
										<el-select v-model="lable" placeholder="请选择筛选条件">
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.label"
										      :value="item.value">
										    </el-option>
										</el-select>
										<div style="position: relative; display: inline-block;">
											<el-checkbox style="color: white;margin-left: 1em;" v-model="checked">部门对比</el-checkbox>
											<div v-if="checked" style="padding: 15px 10px; width:300px;height: 150px; top: 30px; left:35px;position:absolute;z-index: 999;border-radius: 10px; background: rgba(150,150,150,0.3);">
												<el-checkbox style="color: white;margin-top: 1em; margin-left: 1em;" v-model="checked">物联</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em; margin-left: 1em;" v-model="checked">地产</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">电商</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">集团</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">销售</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">金控</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">浩德融媒</el-checkbox>
												<el-checkbox style="color: white;margin-top: 1em;margin-left: 1em;" v-model="checked">其他</el-checkbox>
												<el-button style="position: absolute;left: 100px;top:140px;" size="small" >确定</el-button>
												<el-button style="position: absolute;left: 160px;top:140px;" size="small" >重置</el-button>
											</div>
										</div>
									</el-col>
									<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: right;padding-right: 1em;">
										<div style="float: left; display:iinline-block;background: red;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">员工合伙人</div>
										<div style="float: left; display:iinline-block;background: yellow;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">发展下线</div>
										<div style="float: left; display:iinline-block;background: cyan;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">报备人数</div>
										<div style="float: left; display:iinline-block;background: hotpink;margin: 1em 0 0 1em; height: 8px;width: 20px;border-radius: 3px;">&nbsp;</div>
										<div style="float: left;margin:0.6em 0 0 0.6em; color: #CCCCCC;">成交人数</div>
									</el-col>
								</el-row>
									<chart ref="allMoneyChart"  :option="allMoneyOption" />
									<el-row style="text-align: center;">
									<el-button type="info" style="width: 100%;border-radius:0em 0em 1em 1em;" v-show="!isShow1" @click="isShow1 = true">查看详情&nbsp;&nbsp;<i class="el-icon-arrow-down"></i></el-button>
								</el-row>
								<el-collapse-transition>
							        <div v-show="isShow1">
							          <el-table
								      :data="tableData3"
								      border
								      height="430"
								      style="width: 100%">
								      <el-table-column
									          label="序号"
									          type="index"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
								       <el-table-column
								       		  prop="index"
									          label="排名"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="ID"
									          label="ID"
									          label-class-name="text-center"
									          class-name="text-center">
									        </el-table-column>
									        <el-table-column
									          prop="department"
									          label-class-name="text-center"
									          class-name="text-center"
									          label="部门">
									        </el-table-column>
									        <el-table-column
									          prop="name"
									          label-class-name="text-center"
									          class-name="text-center"
									          label="姓名">
									        </el-table-column>
									        <el-table-column
									          prop="value"
									          sortable
									          label-class-name="text-center"
									          class-name="text-center"
									          :label="lable">
									        </el-table-column>
								    </el-table>
							        </div>
							   </el-collapse-transition>
							   <el-row style="text-align: center;">
									<el-button type="info" style="width: 100%;border-radius:0em 0em 1em 1em;" v-show="isShow1" @click="isShow1 = false">收起&nbsp;&nbsp;<i class="el-icon-arrow-up"></i></el-button>
								</el-row>
								</el-col>
							</el-row>
							</div>
							<!--<el-row :gutter="20" class="bigTitleCon"style="background: #1B1F28;padding: 2em 1em;">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
									<b class="z_topTitle_block" style="font-size: 1.3em;">用户活跃度统计</b>
								</el-col>
							</el-row>
							<el-row class="tableCon" style="border: 1px solid rgb(209, 219, 229);box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px">
								<el-col :xs="24" :sm="8" :md="8" :lg="8" style="text-align: left;">
									<el-table
								      :data="tableData"
								      border
								      height="430"
								      style="width: 100%">
								       <el-table-column label-class-name="text-center" label="2017/11/08">
									        <el-table-column
									          label="排名"
									          type="index"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="name"
									          label="板块"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="data1"
									          label="报备顾客频次"
									          label-class-name="text-center"
									          class-name="text-center">
									        </el-table-column>
									        <el-table-column
									          prop="data2"
									          label-class-name="text-center"
									          class-name="text-center"
									          label="发展下线频次">
									        </el-table-column>
									      </el-table-column>
								      
								    </el-table>
								</el-col>
								<el-col :xs="24" :sm="16" :md="16" :lg="16" style="text-align: left;border-left: 1px solid #CCCCCC;">
									<div style="margin: 1em; text-align: center;" >
										<el-radio-group text-color="white" fill="#339966" v-model="radio1">
										    <el-radio-button label="日活跃"></el-radio-button>
										    <el-radio-button label="周活跃"></el-radio-button>
										    <el-radio-button label="月活跃"></el-radio-button>
										</el-radio-group>
									</div>
									<chart ref="turnoverChart" :option="turnoverOption" />
								</el-col>
							</el-row>
							
							<el-row style="margin: 1em;">
								<el-select v-model="lable" placeholder="请选择筛选条件">
								    <el-option
								      v-for="item in options"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
								  </el-select>
							</el-row>
							<el-row style="margin-top: 2em;">
								<el-table
								      :data="tableData3"
								      border
								      height="430"
								      style="width: 100%">
								      <el-table-column
									          label="序号"
									          type="index"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
								       <el-table-column
								       		  prop="index"
									          label="排名"
									          label-class-name="text-center"
									          class-name="text-center"
									          width="100">
									        </el-table-column>
									        <el-table-column
									          prop="ID"
									          label="ID"
									          label-class-name="text-center"
									          class-name="text-center">
									        </el-table-column>
									        <el-table-column
									          prop="department"
									          label-class-name="text-center"
									          class-name="text-center"
									          label="部门">
									        </el-table-column>
									        <el-table-column
									          prop="name"
									          label-class-name="text-center"
									          class-name="text-center"
									          label="姓名">
									        </el-table-column>
									        <el-table-column
									          prop="value"
									          sortable
									          label-class-name="text-center"
									          class-name="text-center"
									          :label="lable">
									        </el-table-column>
								    </el-table>
							</el-row>-->
						</el-col>
					</el-tab-pane>
				</el-tabs>
			</el-row>

		</div>

	</div>
	
</template>

<script>
import echarts from 'echarts'
import chart from '../../../components/Charts/chart'
export default {
    props:['params'],
    
	data() {
		return {
			initData:[],
			topDate:"",
			radio5:"今天",
			radio4:"全部",
			radio3:"按天",
			radio2:"新增合伙人",
			radio1:"日活跃",
			radio0:"100人以上",
			checked:"",
			isShow:false,
			isShow1:false,
			moneyOption: {},//资金周转率
			allMoneyOption: {},//资金周转率趋势
			turnoverOption:{},
			changeOption:{},
			topTargetData: [
					{
						title: '合伙人',
						value: "13,768万",
						color: "#339966",
						img: 'hehuoren'
					},
					{
						title: '报备客户',
						value: '23,768',
						color: "#9933CC",
						img: 'baobeikehu'
					},
					{
						title: '成交人数',
						value: '23,768',
						color: "#6666FF",
						img: 'renshu'
					},
					{
						title: '佣金支出',
						value: '237,768万',
						color: "#FF9933",
						img: 'yongjin'
					},
					{
						title: '成交客户转化率',
						value: '12%',
						color: "#FF0066",
						img: 'chengjiaoliang'
					},
				],
			activeName:"0",
			activeName2:"",
			tableData: [{
            name: '物联',
            data1: '8',
            data2: '4%'
          },{
            name: '地产',
            data1: '12',
            data2: '8%'
          },{
            name: '电商',
            data1: '15',
            data2: '15%'
          },{
            name: '集团',
            data1: '5',
            data2: '4%'
          },{
            name: '销售',
            data1: '1',
            data2: '4%'
          },{
            name: '金控',
            data1: '0',
            data2: '4%'
          },{
            name: '浩德融媒',
            data1: '2',
            data2: '4%'
          },{
            name: '总计',
            data1: '35',
            data2: '4%'
          },],
          lable:"报备人数",
          tableData3: [{
            name: '赵xx',
            department:"浩德视频",
            ID: '8',
          	value:44,
          	index:"1"
          },{
            name: '王xx',
            department:"物联",
            ID: '88',
          	value:33,
          	index:"2"
          },{
            name: '孙xx',
            department:"产业园",
            ID: '888',
          	value:22,
          	index:"3"
          },{
            name: '李xx',
            department:"物联",
            ID: '8888',
          	value:11,
          	index:"4"
          },{
            name: '周xx',
            department:"金控",
            ID: '8888',
          	value:1,
          	index:"5"
          },],
          options: [{
          value: '报备人数',
          label: '报备人数'
        }, {
          value: '成交量',
          label: '成交量'
        }, {
          value: '发展下线人数',
          label: '发展下线人数'
        }, {
          value: '推荐人数',
          label: '推荐人数'
        }, {
          value: '成交比',
          label: '成交比'
        }, {
          value: '报备用户转化率',
          label: '报备用户转化率'
        }],
        value: ''
		}
	},
	components: { chart},
	methods: {
		setSaleOptionDataArr(){
				//多tabs图表   组装数据
				var xData = ["前七天", "10-24周一", "10-25周二", "10-26周三", "10-27周四", "10-28周五", "10-29周六", "10-30周日",];
				var data1 = {
					data: [30, 26, 28, 62, 28, 15, 10, 10],
					type: 'line'
				}
				var data2 = {
					data: [20, 14, 15, 55, 20, 10, 8, 8],
					type: 'line'
				}
				var data3 = {
					data: [50, 40, 30, 100, 40, 30, 20, 20],
					type: 'line'
				}
				var saleOptionDataArr = [
					{
						name:'0',
						label:'员工合伙人',
						xData:xData,
						legend: [this.radio2],
						yData:[data1],
						textColor:"white",
						refName: "table0",  //ref

					},
					{
						name:'1',
						label:'合作单位合伙人',
						xData:xData,
						legend: [this.radio2],
						yData:[data1],
						textColor:"white",
						refName: "table1",   
					},
					{
						name:'2',
						label:'业主合伙人',
						xData:xData,
						legend: [this.radio2],
						yData:[data1],
						textColor:"white",
						refName: "table2",   
					},
					{
						name:'3',
						label:'内部合伙人',
						xData:xData,
						legend: [this.radio2],
						yData:[data1],
						textColor:"white",
						refName: "table3",   
					},
				]
				this.initSeries(saleOptionDataArr)
			},
			//处理series
			initSeries(initData){
				//多tabs图表   组装series
				var self = this
				var tabChartsArr = self.$utils.returnTabChartsArr(initData)
					tabChartsArr.forEach((itemData,id)=>{
					//返回option
					var itemData = this.$utils.returnTabsChartOption(itemData,id)
					this.$set(this.initData,id,itemData)
				})
				this.setHandleClick()
			},
			setHandleClick(){
				//多tabs图表   重新实例化charts
				var self = this
					this.$nextTick(function () {
					   setTimeout(function() {
						var ref = self.$refs['table'+self.activeName]
						ref[0].initChart()
					  }, 0);
					})
				
				this.moneyChart()
				this.allMoneyChart()
				
				 	
			},
			moneyChart() {
				var option = {
					color:["#FDBF2E","#6666FF","#FF0066"],
					tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)"
				   },
					legend: {
						orient: 'horizontal',
						x: 'center',
						textStyle: {
							color: "white"
						},
						bottom:10,
						data: ['发展下线', '报备人数', '成交人数']
					},
					series: [
						{
							name: '成交量统计',
							type: 'pie',
							label: {
								normal: {
									show: true,
									position: 'inner'
								},
								
							},
							labelLine: {
								normal: {
									show: false
								}
							},
							data: [
								{ value: 300, name: '成交人数' },
								{ value: 12297, name: '发展下线' },
								{ value: 3391, name: '报备人数' },
							]
						}
					]
				};
				var self = this
				this.$set(this,'moneyOption',option)
//				this.moneyOption = option
						setTimeout(function() {
									self.$refs.moneyChart[self.activeName].initChart()	
										  }, 100);
				
					  
				
			},
			allMoneyChart() {
				var xData = ["前七天", "10-24周一", "10-25周二", "10-26周三", "10-27周四", "10-28周五", "10-29周六", "10-30周日",];
				var data1 = {
					data: [30, 26, 28, 62, 28, 15, 10, 10],
					type: 'line'
				}
				var data2 = {
					data: [20, 14, 15, 55, 20, 10, 8, 8],
					type: 'line'
				}
				var data3 = {
					data: [50, 40, 30, 100, 40, 30, 20, 20],
					type: 'line'
				}
				var initData = { //需要给我传的数据
					xData: xData,
					yData: [data1,data2,data3],
					legend: ['普通住宅','车位','洋房'],
					textColor: "white",
					refName: "allMoneyChart",
					returnOption: 'allMoneyOption'
				}
				this.forEachFun(initData)
			},
//			turnoverChart() {
//				var xData = ["前七天", "10-24周一", "10-25周二", "10-26周三", "10-27周四", "10-28周五", "10-29周六", "10-30周日",];
//				var data1 = {
//					data: [30, 26, 28, 62, 28, 15, 10, 10],
//					type: 'bar'
//				}
//				var data2 = {
//					data: [20, 14, 15, 55, 20, 10, 8, 8],
//					type: 'bar'
//				}
//				var initData = { //需要给我传的数据
//					xData: xData,
//					yData: [data1,data2],
//					legend: ['报备客户','发展下线'],
//					textColor: "white",
//					refName: "turnoverChart",
//					returnOption: 'turnoverOption'
//				}
//				this.forEachFun(initData)
//			},
			changeChart() {
				var xData = ["前七天", "10-24周一", "10-25周二", "10-26周三", "10-27周四", "10-28周五", "10-29周六", "10-30周日",];
				var data1 = {
					data: [30, 26, 28, 62, 28, 15, 10, 10],
					type: 'line'
				}
				var initData = { //需要给我传的数据
					xData: xData,
					yData: [data1],
					legend: ['资金周转率'],
					textColor: "white",
					refName: "changeChart",
					returnOption: 'changeOption'
				}
				this.forEachFun(initData)
			},
			forEachFun(initData) {
				//处理数据生成Option
				var option = this.$utils.returnItemSeries(initData)
				var self = this
				this.$set(this,initData.returnOption,option)
					  setTimeout(function() {
						self.$refs[initData.refName][self.activeName].initChart()
					  }, 0);
				
				
//				this[initData.returnOption] = option
			},
	},
	mounted() {
		this.setSaleOptionDataArr();
		this.allMoneyChart();
//		this.turnoverChart();
//		this.changeChart();
		this.moneyChart();
		
	}
};
</script>
  <style scope>
.week-con {
	margin: 0.625rem
}

.myTabClass .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    /*border: 1px solid #216BCE;
    border-radius: 5px 5px;*/
   /* background: #0386D1; */
}
.myTabClass .el-tabs--card>.el-tabs__header .el-tabs__item{
	border: 1px solid #216BCE;
	margin-left: 5px;
	margin-right: 20px;
    border-radius: 5px 5px;
}
.myTabClass .el-table thead.is-group th{
	/* background:#0386D1 */
}
.myTabClass .el-tabs__nav-scroll{
	background: none;
	margin-bottom: 1em;
}
.myTabClass .el-tabs__header{
	border: none;
}
.myTabClass .el-tabs--card>.el-tabs__header .el-tabs__nav{
	border: none;
}
.chart-container {
	display: block;
	/*background:#0D182B*/
}

.barCharts {
	width: 100%;
	height: 26.875rem;
}
.col-md-1-5 {

width: 20%;

float: left;

}

.col-xs-1-5,.col-sm-1-5,.col-md-1-5,.col-lg-1-5 {

min-height: 1px;

padding-left: 15px;

padding-right: 15px;

position: relative;

}
@media (max-width: 768px) {

.col-xs-1-5 {

width: 100%;

float: left;

}
}
@media (min-width: 768px) {

.col-sm-1-5 {

width: 100%;

float: left;

}

}

@media (min-width: 992px) {

.col-md-1-5 {

width: 20%;

float: left;

}

}

@media (min-width: 1200px) {

.col-lg-1-5 {

width: 20%;

float: left;

}

}
</style>